import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { useDemoStore } from '../stores/demo'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    }
    ,
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
    ,
    {
      path: '/first/setup',
      name: 'Setup',
      component: () => import('../views/first/SetupView.vue')
    }
    ,
    {
      path: '/first/setup2',
      name: 'Setup2',
      component: () => import('../views/first/SetupView2.vue')
    }
    ,
    {
      path: '/first/ref',
      name: 'Ref',
      component: () => import('../views/first/RefView.vue')
    }
    ,
    {
      path: '/first/computed',
      name: 'Computed',
      component: () => import('../views/first/ComputedView.vue')
    }
    ,
    {
      path: '/first/todolist',
      name: 'TodoList',
      component: () => import('../views/first/todolist/TodoList.vue')
    }
    ,
    {
      path: '/second/life',
      name: 'Life',
      component: () => import('../views/second/LifeView.vue')
    }
    ,
    {
      path: '/second/watch',
      name: 'watch',
      component: () => import('../views/second/WatchView.vue')
    }
    ,
    {
      path: '/second/ref',
      name: 'ref',
      component: () => import('../views/second/RefView.vue')
    }
    ,
    {
      path: '/second/father',
      name: 'father',
      component: () => import('../views/second/FatherView.vue')
    }
    ,
    {
      path: '/third/father',
      name: 'ThirdFather',
      component: () => import('../views/third/FatherView.vue')
    }
    ,
    {
      path: '/fourth/grandfather',
      name: 'grandfather',
      component: () => import('../views/fourth/GrandFather.vue')
    }
    ,
    {
      path: '/fourth/tempdemo',
      name: 'tempdemo',
      component: () => import('../views/fourth/TempDemo.vue')
    }
    ,
    {
      path: '/fourth/loadasynccomp',
      name: 'loadasynccomp',
      component: () => import('../views/fourth/LoadAsyncComp.vue')
    }
    ,
    {
      path: '/fourth/mousemove',
      name: 'mousemove',
      component: () => import('../views/fourth/MouseMove.vue')
    }
    ,
    {
      path: '/fourth/directive',
      name: 'directive',
      component: () => import('../views/fourth/DirectiveView.vue')
    }
    ,
    {
      path: '/fourth/i18n',
      name: 'i18n',
      component: () => import('../views/fourth/I18nView.vue')
    }
    ,
    {
      path: '/fourth/suspense',
      name: 'suspense',
      component: () => import('../views/fourth/SuspenseView.vue')
    }
    ,
    {
      path: '/fiveth/keepalive',
      name: 'keepalive',
      component: () => import('../views/fiveth/KeepAliveView.vue')
    }
    ,
    {
      path: '/fiveth/teleport',
      name: 'teleport',
      component: () => import('../views/fiveth/TeleportView.vue')
    }
    ,
    {
      path: '/fiveth/vuerouter',
      name: 'vuerouter',
      component: () => import('../views/fiveth/RouterViewDemo.vue')
    }
    ,
    {
      path: '/fiveth/demo/:id',
      name: 'demo',
      component: () => import('../views/fiveth/DemoView.vue')
    }
    ,
    {
      path: '/fiveth/storeview',
      name: 'storeview',
      component: () => import('../views/fiveth/StoreView.vue')
    }
  ]
})

router.beforeEach((to,from,next)=>{
  useDemoStore()
  next()
})



export default router
